<template>
  <div :style="background"
       class="bgBackground">

    <div>

      <el-button id="choujiangbnt"
                 type="warning"
                 round
                 @click="test"
                 style="position: fixed; bottom: 30px; right: 30px;">抽奖</el-button>

    </div>
    <div>
      <h1 style="padding-top:160px;padding-right:40px;font-size: 60px;">{{title}}</h1>
    </div>
    <div style="width: 88%;height:450px;margin: 0 auto;text-align: left;position:absolute;bottom:0;border: 3px dotted red;margin-left: 90px;margin-bottom:160px">

      <h1 id='mingdan'>{{choujiangShow}}</h1>
    </div>
  </div>
</template>

<script>
import http from '../../api/http.js'

export default {
  created () {
    http.fetchGet('/Drawing/getTitle', '').then((data) => {
      this.title = data.data.data;
    }).catch(err => {
      console.log(err)
    }
    )
  },
  name: 'dist',
  data () {
    return {
      // 顶部导航背景图片配置
      background: {
        // 背景图片地址
        backgroundImage: "url(" + require("../bj.png") + ")",
        // 背景图片是否重复
        backgroundRepeat: 'no-repeat',
        // 背景图片大小
        backgroundSize: 'cover',
        // 背景颜色
        backgroundColor: '#000',
        // 背景图片位置
        backgroundPosition: 'center top'
      },
      form: {
        visible: false,
        title: '请假编辑',
        data: {},
        loading: false,
      },
      searchForm: {
        warename: '',
        orgname: '',
      },
      // 表格数据
      tableData: {
        list: [],
        total: null,
        loading: false,
        page: 1,
        pageSize: 20,
      },
      date: [],
      choujiang: [],
      choujiangShow: '',
      title: ''
    };
  },

  methods: {
    test () {
      document.getElementById('choujiangbnt').disabled = true;
      this.choujiangShow = '';


      http.fetchGet('/Drawing/drawing', '').then((data) => {
        if (data.data.data.length < 5) {
          document.getElementById('mingdan').style.fontSize = '50px';
        } else if (data.data.data.length >= 5 && data.data.data.length <= 20) {
          document.getElementById('mingdan').style.fontSize = '50px';
        } else if (data.data.data.length >= 20 && data.data.data.length <= 99) {
          document.getElementById('mingdan').style.fontSize = '38px';
        } else if (data.data.data.length >= 100 && data.data.data.length <= 150) {
          document.getElementById('mingdan').style.fontSize = '29px';
        } else if (data.data.data.length >= 150 && data.data.data.length <= 200) {
          document.getElementById('mingdan').style.fontSize = '21px';
        }
        this.choujiang = data.data.data;


        if (this.choujiang.length > 0) {

          const loading = this.$loading({
            lock: true,
            text: '抽奖中。。。。',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            //alert('1111')
            loading.close();
            this.test2();
          }, 2000);
        }
      }).catch(err => {
        console.log(err)
      }
      )








      // let _time = 0;
      // for (let i = 0; i < this.choujiang.length; i++) {

      //   setTimeout(function () {
      //     this.choujiangShow += this.choujiang[i];
      //   }, _time)

      //   _time += 1000;

      // }



      // for (let i = 0; i < this.choujiang.length; i++) {

      //   this.choujiangShow += this.choujiang[i];
      //   //this.sleep(1000);
      // }
    },


    test2 () {
      var i = 0;
      var id = setInterval(() => {
        // 方法区

        this.choujiangShow += this.choujiang[i].empName + '、';
        if ((i + 1) == this.choujiang.length) {
          clearInterval(id);
          this.choujiangShow += '抽奖结束';
        }
        i++;
      }, 1000);

    },



    //请求等待函数
    async sleep (n) {
      var start = new Date().getTime();
      while (true) {
        if (new Date().getTime() - start > n) {
          break;
        }
      }
    }
  }
}

</script>
<style>
.bgBackground {
  width: 100%;
  height: 100vh;
}
h1 {
  font-family: 隶书;
  font-weight: normal;
  font-size: 20px;
  color: goldenrod;
  margin: 0;
  line-height: 1.5;
}
</style>